<script setup>
import BaseEchart from "@/components/charts/base-echart.vue";
import PieChart from "@/components/charts/pie-chart.vue";
</script>

<template>
  <div class="container">
    <el-row>
      <el-col>
        <h1>个人收益信息</h1>
        <base-echart class="chart-left"></base-echart>
      </el-col>

      <el-col>
        <h1>多多给您的资产推荐</h1>
        <pie-chart class="chart-right"></pie-chart>

      </el-col>
    </el-row>


    <!--        <profile-bar :profile=computedProfile></profile-bar>-->
    <div>
      <div>提示：</div>
      <div>填写结果会影响多多的推荐结果，请谨慎填写</div>
      <el-button type="primary" @click="isShow = true" v-if="!isShow">点击此处</el-button>
    </div>

    <el-form :model="formData" label-position="top" v-if="isShow">
      <el-form-item label="问题1：您每年可用于投资的金额大致为">
        <el-radio-group v-model="formData.a">
          <el-radio label="选项1 ：不足5万"></el-radio>
          <el-radio label="选项2 ：5-10万"></el-radio>
          <el-radio label="选项3 ：10-20万"></el-radio>
          <el-radio label="选项4 ：20-50万"></el-radio>
          <el-radio label="选项5 ：50及以上"></el-radio>

        </el-radio-group>
      </el-form-item>
      <el-form-item label="问题2：您的首要投资目标为">
        <el-radio-group v-model="formData.b">
          <el-radio label="选项1 ：小小收益，我不贪心"></el-radio>
          <el-radio label="选项2 ：长期增长，收益多点"></el-radio>
          <el-radio label="选项3 ：增长奇迹，超越股神"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="问题3：您的投资态度是哪一种">
        <el-radio-group v-model="formData.c">
          <el-radio label="选项1 ：非常稳健，尽量不亏 "></el-radio>
          <el-radio label="选项2 ：接受波动，回撤不怕"></el-radio>
          <el-radio label="选项3 ：爱好风险，比较激进"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="问题4：您可以接受的投资时长为">
        <el-radio-group v-model="formData.d">
          <el-radio label="选项1 ：短期投资，一年以内 "></el-radio>
          <el-radio label="选项2 ：中期投资，一到五年"></el-radio>
          <el-radio label="选项3 ：长期投资，五年以上"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="clickHandle">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Profile from "@/views/Profile.vue";
import ProfileBar from "@/components/profile-bar.vue";
import ProfileChart from "@/components/profile-chart.vue";
import axios from "axios";
export default {
  components: {ProfileChart, ProfileBar, Profile},
  data() {
    return {
      formData: {},
      isShow: false
    }
  },

  computed: {
    computedGain() {
      return {
        dailyGains: [
          {date: "2022-05-01", gain: "1.45"},
          {date: "2022-05-02", gain: "2.98"},
          {date: "2022-05-03", gain: "-258.32"},
          {date: "2022-05-04", gain: "123.34"},
          {date: "2022-05-05", gain: "342.52"},
          {date: "2022-05-06", gain: "-100.53"}
        ]
      }
    }
  },
  mounted() {
    this.renderChart()
    this.renderProfile()
  },
  methods: {
    clickHandle() {
      console.log(Object.values(this.formData))
      if (Object.values(this.formData).every(v => v)) {
        //CheckNotNull
        axios({
          method: 'post',
          url: 'http://localhost:5000/usr/profile',
          params: {
            id: localStorage.getItem('user_id'),
            cost: this.formData.a==='选项1 ：不足5万'?5:this.formData.a==='选项2 ：5-10万'?10:this.formData.a==='选项3 ：10-20万'?20:this.formData.a==='选项4 ：20-50万'?50:100,
            rate: this.formData.b==='选项1 ：小小收益，我不贪心'?'low':this.formData.b==='选项2 ：长期增长，收益多点'?'mid':'high',
            risk: this.formData.c==='选项1 ：非常稳健，尽量不亏 '?'low':this.formData.c==='选项2 ：接受波动，回撤不怕'?'mid':'high',
            time: this.formData.d==='选项1 ：短期投资，一年以内 '?'short':this.formData.d==='选项2 ：中期投资，一到五年'?'mid':'high'
          },
          timeout: 5000,
        }).then(res => {
          this.$message.success("提交成功")
          let profile=res.data;
          localStorage.setItem('welcome_msg',profile.welcome_msg);
          localStorage.setItem('expected_profit',profile.expected_profit);
          localStorage.setItem('high_risk_ratio',parseFloat(profile.high_risk_ratio));
          localStorage.setItem('low_risk_ratio',parseFloat(profile.low_risk_ratio));
          localStorage.setItem('maximum_loss',parseFloat(profile.maximum_loss));
          localStorage.setItem('maximum_profit',parseFloat(profile.maximum_profit));
          console.log(profile)
          //更新当前页面
          this.isShow=false
        }).catch(err => {
          this.$message.error("提交失败")
          console.log(err)
        })
        //回到顶端
        window.scrollTo(0, 0)

      } else {
        this.$message.error('选项不能为空')
      }

    },

    // renderChart() {
    //   const chart = this.$refs.chart
    //   const dailyGains = [
    //     {date: "2022-05-01", gain: "1.45"},
    //     {date: "2022-05-02", gain: "2.98"},
    //     {date: "2022-05-03", gain: "-258.32"},
    //     {date: "2022-05-04", gain: "123.34"},
    //     {date: "2022-05-05", gain: "342.52"},
    //     {date: "2022-05-06", gain: "-100.53"}
    //   ]
    //   const dates = dailyGains.map(item => item.date)
    //   const gains = dailyGains.map(item => item.gain)
    //
    //   this.options = {
    //     xAxis: {
    //       type: 'category',
    //       data: dates
    //     },
    //     yAxis: {
    //       type: 'value'
    //     },
    //     series: [{
    //       data: gains,
    //       type: 'line'
    //     }]
    //   }
    //   // const chartInstance = this.$refs.chart.echartsInstance
    //   // chartInstance.setOption(this.options)
    // },
    // renderProfile(){
    //   //绘制饼图
    //   const profile = this.$refs.profile
    //
    // }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 30px;
  text-align-last: left;

  :first-child div {
    margin-bottom: 20px;
  }
}
//让两张图左右放置
.el-row {
  display: flex;
  justify-content: space-between;
}

h1{
  font-size: 20px;
  font-weight: bold;
  //向右
  margin-left: 160px;
}
</style>